<template>
    <div>
        <van-nav-bar title="路由获取和使用" fixed placeholder left-arrow @click-left="onClickLeft" />
        <div>路由跳转</div>
        <van-button type="primary" size="mini" @click.stop="goRouter">点击跳转</van-button>
        <div>获取query: id:{{ query.id }}</div>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const onClickLeft = () => history.back()
//获取路由参数query或者param
const route = useRoute()
const router = useRouter()
const query = route.query;
//另一种写法
// const query = router.currentRoute?.value?.query

//路由跳转写法
const goRouter = () => {
    router.push({ name: 'DefinedProps',query:{id:10001} })
}


</script>

<style scoped lang="scss"></style>